<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <div id="react"></div>  
  <!--react 核心库，与宿主环境无关-->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- 依赖核心库，将核心库功能与页面结合 -->
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 编译jsx -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
      // ReactDom.render(显示的东西，容器)
      ReactDOM.render("Hello World",document.getElementById('react'))
      // let p = React.createElement("p",{
      //   title:"第二个p元素",
      //   className:'react-sec-p'
      // },"一个P")
      // let p1 = <p className="react-sec-p">一个P</p>
      // 创建一个H1元素
      // let h1 = React.createElement("h1",{
      //   title:"第一个react元素",
      //   className:'react-first'
      // },"Hello","World",p)
      let h1 = <h1 title="第一个react元素">Hello World <p className="react-sec-p">一个P</p></h1>
      // 创建一个p元素
      
      ReactDOM.render(h1,document.getElementById('react'))
  </script>
</body>

</html>